<script setup>
import {ipc} from "@/utils/ipcRenderer";
import {ipcApiRoute} from "@/api/main";
import {onMounted, ref} from "vue";
import dayjs from "dayjs";

// 定义
const timeInterval = '60000'

const list = ref([])

const openNotice = async () => {
  await ipc.invoke('controller.windows.openNotice')
}

const getList = async () => {
  console.log('send', ipc)
  const result = await ipc.invoke('controller.sql.getZdList')
  console.log(result, 'result')
  list.value = result.recordset || []
  for (let i = 0; i < list.value.length; i++) {
    const each = list.value[i];
    console.log(each, 'each')
    each.mx = await getMx(each.BillID)
  }
}

const getMx = async (billID) => {
  const list = await ipc.invoke('controller.sql.getMx', billID)
  return list.recordset || []
}

const dateFormat = (date) => {
  return new dayjs(date).subtract(8, 'hour').format("YYYY-MM-DD HH:mm:ss")
}

const openSetting = () => {
  ipc.invoke(ipcApiRoute.openWindow, {
    title: '系统设置',
    url: '/#/setting',
    height: 800
  })
}

let countdown = ref(timeInterval)
const startInterval = () => {
  setInterval(() => {
    countdown.value = countdown.value - 500
    if(countdown.value < 0) {
      countdown.value = timeInterval
      getList()
    }
  }, 500)
}

onMounted(() => {
  getList()
  ipc.invoke('controller.mqtt.startMQTT')
  // startInterval()
})
</script>

<template>
  <div class="cockpit-wrapper">
    <a-button @click="openNotice">打开弹窗</a-button>
    <div v-for="item in list" :key="item.BillID" class="list-item">
      <div class="deliver">{{ item.Deliverer || '提货' }}
      <span class="date">{{ dateFormat(item.Dte) }}</span>
      </div>
      <div class="good-list">
        <div class="good-item" v-if="item.mx" v-for="it in item.mx">
          <span>{{ it.Name }}</span>
          <span>{{ it.Qty }}</span>
        </div>
      </div>
    </div>

<!--    <img src="@/assets/setting.png" class="setting-icon" @click="openSetting" alt="">-->
    <div class="countdown-bar">
      <div class="progress" :style="{width: (timeInterval - countdown) / timeInterval * 100 + '%'}"></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.setting-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 20px;
  cursor: pointer;
}

.cockpit-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .list-item {
    width: 25%;
    border: 1px solid #b6b6b6;
    .deliver {
      border-bottom: 1px solid #b6b6b6;
      text-align: center;
      padding: 6px 0;
    }
    .good-list {
      .good-item {
        display: flex;
        justify-content: space-between;
        padding: 5px;
      }
    }
  }
}

.countdown-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3px;
  .progress {
    height: 3px;
    background-color: #2e63ec;
  }
}
</style>